<template>
  <div id="app">
    <header>
      <h1>大模型聊天界面</h1>
      <ModelSelector v-model:selectedModel="selectedModel" />
      <button @click="newSession">新建会话</button>
    </header>
    <main>
      <ChatSession :messages="currentSession.messages" :model="selectedModel" @send-message="sendMessage" />
    </main>
    <aside v-if="showSessionsList">
      <ul>
        <li v-for="(session, index) in sessions" :key="index" @click="loadSession(index)">
          {{ session.name }}
        </li>
      </ul>
    </aside>
    <button class="toggle-sessions" @click="toggleSessionsList" v-if="!showSessionsList">
      显示会话列表
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import ModelSelector from './components/ModelSelector.vue';
import ChatSession from './components/ChatSession.vue';

interface Message {
  sender: string;
  content: string;
}

interface Session {
  name: string;
  messages: Message[];
}

const selectedModel = ref('GPT-4');
const currentSessionIndex = ref(0);
const showSessionsList = ref(true);
const sessions = reactive<Session[]>([
  {
    name: 'Session 1',
    messages: [
      { sender: 'user', content: '你好' },
      { sender: 'model', content: '你好！有什么我可以帮忙的吗？' },
    ],
  },
]);

const newSession = () => {
  const newSessionName = `Session ${sessions.length + 1}`;
  sessions.push({ name: newSessionName, messages: [] });
  currentSessionIndex.value = sessions.length - 1;
};

const loadSession = (index: number) => {
  currentSessionIndex.value = index;
};

const sendMessage = (content: string) => {
  sessions[currentSessionIndex.value].messages.push({ sender: 'user', content });
  // Simulate model response
  setTimeout(() => {
    sessions[currentSessionIndex.value].messages.push({ sender: 'model', content: '这是模型的回复。' });
  }, 1000);
};

const toggleSessionsList = () => {
  showSessionsList.value = !showSessionsList.value;
};

const currentSession = computed(() => {
  return sessions[currentSessionIndex.value];
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  display: flex;
  height: 100vh;
  flex-direction: column;
}

header {
  background-color: #f8f9fa;
  padding: 1rem;
  border-bottom: 1px solid #ddd;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

aside {
  width: 200px;
  background-color: #f8f9fa;
  border-left: 1px solid #ddd;
  padding: 1rem;
  overflow-y: auto;
  transition: all 0.3s ease;
}

.toggle-sessions {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #0dcaf0;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
}

.toggle-sessions:hover {
  background-color: #0badd5;
}

@media (max-width: 768px) {
  aside {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    transform: translateX(-100%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  aside.visible {
    transform: translateX(0);
  }

  .toggle-sessions {
    display: block;
  }
}
</style>